<template>
    <div :class="visible?'drawer-on':'drawer-off'" class="child-drawer">
        <slot name="title"></slot>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "rightDrawer",
        mounted() {
        },
        data() {
            return {};
        },
        props: {
            // 使用从父组件传来的属性值visible
            visible: {
                type: Boolean,
                default: true
            },
            updateMyCharts: {
                type: Function,
                default: null
            },
            closeDrawer: {
                type: Function,
                default: null
            }
        },
        methods: {}
    };
</script>

<style scoped>
    @import "../../assets/styles/transition.css";

    .child-drawer {
        position: absolute;
        height: 100%;
        width: 22%;
        background-color: white;

        border-left: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;
        overflow: hidden;
        /*禁用文本换行*/
        white-space: nowrap;
        z-index: 100;
    }
</style>